<template>
  <div class="skuCount">
    <div class="title"><i class="el-icon-s-promotion"></i>产品分布</div>
    <type-list-nav :typeList="typeList" @clickType="clickType" :typeIndex="typeIndex"></type-list-nav>
    <ve-histogram
      v-loading="loading"
      :data="chartData"
      :extend="extend"
      :legend-visible="false"
      :height="height"
      :width="width"
    ></ve-histogram>
  </div>
</template>
<script>
import { skuCount } from "@/api/dashboard";
import VeLine from "v-charts/lib/line.common";
import veHistogram from "v-charts/lib/histogram.common";
import amap from "v-charts/lib/amap.common";
import typeListNav from "./typeListNav"
export default {
  components: {
    veHistogram,
    typeListNav 
  },
  props: {
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "350px"
    }
  },
  data() {
    return {
      loading: true,
      typeList: [
        "按品牌计数sku",
        "按BU计数sku",
        "按系列计数sku",
        "按销售负责 计数sku"
      ],
      typeList: [
        {
          lable: "按品牌计数sku",
          type: "byBrand"
        },
        {
          lable: "按BU计数sku",
          type: "byBU"
        },
        {
          lable: "按系列计数sku",
          type: "byProductCategory"
        },
        {
          lable: "按销售负责 计数sku",
          type: "bySale"
        }
      ],
      typeIndex: "byBrand",
      extend: {
        series: {
          barMaxWidth: 30,
          label: {
            show: true,
            position: "top"
          }
        },
        xAxis: {
          type: "category",
          axisLabel: {
            rotate: 70
          }
        },
        color: {
          x: 0,
          y: 1,
          colorStops: [
            {
              offset: 0,
              color: "#20fbce" // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#14ab8c" // 100% 处的颜色
            }
          ],
          globalCoord: false // 缺省为 false
        },
      },
      chartData: {
        columns: ["brandName", "cnt"],
        rows: []
      }
    };
  },
  created() {
    this.getSkuCount(this.typeIndex);
  },
  methods: {
    clickType(item) {
      this.loading = true;
      this.typeIndex = item.type;
      const columns = [];
      switch (item.type) {
        case "byBrand":
          columns.push("brandName");
          break;
        case "byBU":
          columns.push("businessUnit");
          break;
        case "byProductCategory":
          columns.push("productCategory");
          break;
        default:
          columns.push("userName");
          break;
      }
      columns.push("cnt");
      this.chartData.columns = columns;
      this.getSkuCount(item.type);
    },
    getSkuCount(type) {
      skuCount(type).then(res => {
        this.loading = false;
        this.chartData.rows = res.data.data.sort(this.sortData);
      });
    },
    sortData(a, b) {
      return b.cnt > a.cnt ? 1 : -1;
    }
  }
};
</script>
<style lang="scss" scoped>
.skuCount {
  position: relative;
  .title{
    position: absolute;
    top: 5px;
    font-size: 16px;
    i{
      color: #409eff;
    }
  }
}

</style>